    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>业绩详情报告</title>
        <link type="text/css" href="https://at.alicdn.com/t/font_1682867_op9vdsb9x8.css" rel="stylesheet">
        </link>
        <style>
            * 清除内外边距 */ body,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            hr,
            p,
            blockquote,
            /* structural elements 结构元素 */
            dl,
            dt,
            dd,
            ul,
            ol,
            li,
            /* list elements 列表元素 */
            pre,
            /* text formatting elements 文本格式元素 */
            fieldset,
            lengend,
            button,
            input,
            textarea,
            /* form elements 表单元素 */
            th,
            td {
                /* table elements 表格元素 */
                margin: 0;
                padding: 0;
            }

            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #F6F7FA;
                font-size: .28rem;
            }

            /* 设置默认字体 */
            body,
            button,
            input,
            select,
            textarea {
                /* for ie */
                /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
                /* font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; */
                /* 用 ascii 字符表示，使得在任何编码下都无问题 */
            }

            h1 {
                font-size: 18px;
                /* 18px / 12px = 1.5 */
            }

            h2 {
                font-size: 16px;
            }

            h3 {
                font-size: 14px;
            }

            h4,
            h5,
            h6 {
                font-size: 100%;
            }

            address,
            cite,
            dfn,
            em,
            let {
                font-style: normal;
            }

            /* 将斜体扶正 */
            code,
            kbd,
            pre,
            samp,
            tt {
                font-family: "Courier New", Courier, monospace;
            }

            /* 统一等宽字体 */
            small {
                font-size: 12px;
            }

            /* 小于 12px 的中文很难阅读，让 small 正常化 */

            /* 重置列表元素 */
            ul,
            ol {
                list-style: none;
            }

            /* 重置文本格式元素 */
            a {
                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }

            abbr[title],
            acronym[title] {
                /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
                border-bottom: 1px dotted;
                cursor: help;
            }

            q:before,
            q:after {
                content: '';
            }

            /* 重置表单元素 */
            legend {
                color: #000;
            }

            /* for ie6 */
            fieldset,
            img {
                border: none;
            }

            /* img 搭车：让链接里的 img 无边框 */
            /* 注：optgroup 无法扶正 */
            button,
            input,
            select,
            textarea {
                font-size: 100%;
                /* 使得表单元素在 ie 下能继承字体大小 */
            }

            /* 重置表格元素 */
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            /* 重置 hr */
            hr {
                border: none;
                height: 1px;
            }

            /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
            html {
                overflow-y: scroll;
            }
        </style>
        <style>
            [v-cloak]{
                display: none;
            }
            /* 公共样式 */
            div {
                box-sizing: border-box;
            }

            .flex-box {
                display: flex;
            }

            .flex-cen {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .flex-between {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .flex-column-between {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            /* 公共样式结束 */
            .tab {
                height: 4.9rem;
                background: linear-gradient(to bottom, #FF4400, #FC882D, #F6F7FA);
            }

            .tab .bar {
                color: white;
                font-size: .28rem;
                padding: 0 .34rem;
                padding-top: .16rem;
            }

            .tab .bar .bar-c {
                font-size: .3rem;
                color: #FF4400;
                padding: .04rem .24rem;
                border-radius: .4rem;
                background-color: white;
                box-shadow: 0 .06rem .12rem rgba(0, 0, 0, 0.16);
            }

            .info {
                position: relative;
                width: 6.96rem;
                height: 7.72rem;
                border-radius: .16rem;
                background-color: white;
                position: absolute;
                top: 1rem;
                left: 0;
                right: 0;
                margin: 0 auto;
                padding: .6rem .9rem;
            }

            .info .top {
                text-align: center;
                margin-bottom: 1.24rem;
            }

            .info .top div p {
                margin-bottom: .3rem;
            }

            .info .top div span {
                color: #F70114;
                font-weight: bold;
            }

            .cir {
                width: .3rem;
                height: .3rem;
                border-radius: 50%;
                background-color: green;
                position: absolute;
                background-color: #FAB27A;
            }

            .cir-lef {
                top: 2.2rem;
                left: -0.15rem;
            }

            .cir-rig {
                top: 2.2rem;
                right: -0.15rem;
            }

            .line {
                font-size: .32rem;
                color: #E5E5E5;
                width: 5.58rem;
                position: absolute;
                top: 2.1rem;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
            }

            .bom {
                justify-content: space-between;
            }

            .bom .bom-lef .item,
            .bom-rig .item {
                margin-bottom: .96rem;
            }

            .bom .bom-lef .item div,
            .bom-rig .item div {
                margin-left: 10px;
            }

            .bom .bom-lef .item div .item-num,
            .bom-rig .item div .item-num {
                font-weight: bold;
            }

            .bom .bom-lef .item div .item-title,
            .bom-rig .item div .item-title {
                color: #9D9D9D;
            }

            .commission-icon {
                color: #FF4400;
                font-size: .68rem;
            }

            .all-icon {
                color: #4D8BFD;
                font-size: .68rem;
            }

            .ave-icon {
                color: #FF9E00;
                font-size: .68rem;
            }

            .pay-icon {
                color: #4D8BFD;
                font-size: .68rem;
            }

            .cancel-icon {
                color: #C4C4C4;
                font-size: .68rem;
            }

            .arrow {
                width: 100%;
                position: fixed;
                bottom: .2rem;
                left: 0;
                text-align: center;
                font-size: .44rem;
            }

            .arrow .arrow-lef {
                margin-right: 1rem;
            }
        </style>
       <script src="./vue.min.js"></script>
       <script src="./jquery.min.js"></script>
       <script src="./moment.min.js"></script>
    </head>

    <body>
        <div id="app" v-cloak>
            <div class="tab">
                <div class="bar flex-between">
                    <p v-for="(item, index) in tabGroup" :key="index" :class="[current === index ? 'bar-c': '']"
                        @click="current = index">{{item}}</p>
                </div>
            </div>
            <div class="info">
                <div class="top flex-between">
                    <div class="deal">
                        <p>成交额</p>
                        <span>¥{{result.alipayTotalPrice}}</span>
                    </div>
                    <div class="commiss">
                        <p>有效佣金</p>
                        <span>¥{{result.validCommission}}</span>
                    </div>
                    <div class="order">
                        <p>有效订单</p>
                        <span>¥{{result.validOrderNum}}</span>
                    </div>
                </div>
                <div>
                    <div class="cir cir-lef"></div>
                    <div class="cir cir-rig"></div>
                    <p class="line">- - - - - - - - - - - - - - - - - - - - - - - - </p>
                </div>
                <div class="bom flex-box">
                    <div class="bom-lef">
                        <div class="item flex-box">
                            <i class="iconfont iconquanbuyongjin commission-icon"></i>
                            <div class="flex-column-between">
                                <p class="item-title">全部佣金</p>
                                <p class="item-num">{{result.totleCommission}}</p>
                            </div>
                        </div>
                        <div class="item flex-box">
                            <i class="iconfont icontuikuanyongjin cancel-icon"></i>
                            <div class="flex-column-between">
                                <p class="item-title">退款佣金</p>
                                <p class="item-num">{{result.invalidCommission}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="bom-rig">
                        <div class="item flex-box">
                            <i class="iconfont iconquanbudingdan all-icon"></i>
                            <div class="flex-column-between">
                                <p class="item-title">全部订单</p>
                                <p class="item-num">{{result.orderNum}}</p>
                            </div>
                        </div>
                        <div class="item flex-box">
                            <i class="iconfont icontuikuandingdan cancel-icon"></i>
                            <div class="flex-column-between">
                                <p class="item-title">退款订单</p>
                                <p class="item-num">{{result.invalidOrderNum}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        // rem适配代码
        (function (n, e) {
            let t = n.documentElement,
                i = "orientationchange" in window ? "orientationchange" : "resize",
                d = function () {
                    let n = t.clientWidth;
                    n && (t.style.fontSize = n / 7.5 + "px")
                };
            n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
        })(document, window);
    </script>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    tabGroup: ['今天', '昨天', '近七天', '近30天', '本月'],
                    current: 0,
                    params: {},
                    result: {},
                }
            },
            created() {
                this.params = (function () {
                    let search = location.search;
                    let params = {};
                    if (search != "") {
                        search.slice(1).split("&")
                            .forEach(
                                function (val) {
                                    let arr = val.split("=");
                                    params[arr[0]] = arr[1];
                                }
                            );
                    }
                    return params;
                })();
                this.getData(this.current)
            },
            methods: {
                getData(val = 0) {
                    let that = this
                    $.ajax({
                        url: 'http://taoke.daihuo.com/api/admin/comm/details',
                        type: "GET",
                        data: {
                            ...this.getDate(val),
                            userId: this.params.userId
                        },
                        success: function (res) {
                            that.result = res.data
                            console.log(that.result)
                        },
                        error: function (err) {
                            console.log('失败了')
                        }
                    });
                },
                getDate(val) {
                    // dateFormat 用于处理日期间隔 传入 数字 返回对应的开始 结束时间
                    let start = null;
                    let end = null;
                    let d;
                    switch (val) {
                        case 0:
                            // 今天
                            start = moment()
                                .hour(0)
                                .minute(0)
                                .second(0)
                                .format('YYYY-MM-DD HH:mm:ss');

                            end = moment().format('YYYY-MM-DD HH:mm:ss');
                            break;
                        case 1:
                            // 昨天
                            d = moment().subtract(1, 'day');

                            start = d
                                .hour(0)
                                .minute(0)
                                .second(0)
                                .format('YYYY-MM-DD HH:mm:ss');
                            end = d
                                .hour(23)
                                .minute(59)
                                .second(59)
                                .format('YYYY-MM-DD HH:mm:ss');
                            break;
                        case 2:
                            // 仅七天
                            start = moment()
                                .subtract(6, 'day')
                                .hour(0)
                                .minute(0)
                                .second(0)
                                .format('YYYY-MM-DD HH:mm:ss');

                            end = moment()
                                .hour(23)
                                .minute(59)
                                .second(59)
                                .format('YYYY-MM-DD HH:mm:ss');
                            break;
                        case 3:
                            // 近三十天
                            start = moment()
                                .subtract(29, 'day')
                                .hour(0)
                                .minute(0)
                                .second(0)
                                .format('YYYY-MM-DD HH:mm:ss');

                            end = moment()
                                .hour(23)
                                .minute(59)
                                .second(59)
                                .format('YYYY-MM-DD HH:mm:ss');
                            break;
                        case 4:
                            // 本月
                            start = moment().format('YYYY-MM-01 00:00:00');

                            end = moment()
                                .hour(23)
                                .minute(59)
                                .second(59)
                                .format('YYYY-MM-DD HH:mm:ss');
                            break;
                    }
                    return {
                        startTime: start,
                        endTime: end
                    };
                }
            },
            watch: {
                current(val) {
                    this.getData(val)
                }
            }
        })
    </script>

    </html>